<template>
  <div class="main" style="display: none">
    <!-- 启动页 -->
    <transition name="fade2">
      <first-right-page
        v-if="defaultShow"
        style="overflow-x: hidden"
      ></first-right-page>
    </transition>
    <!-- 邻居-->
    <!-- <router-view name="People_neighbour"></router-view> -->
    <!-- 出租关系 -->
    <!-- <router-view name="Building_RentData" v-show="chartShow"></router-view> -->
    <!-- 楼栋周边 -->
    <!-- <building-buffer v-show="!chartShow"></building-buffer> -->
  </div>
</template>

<script>
/* eslint-disable */
import firstRightPage from "@/views/contentList/firstRightPage";
import buildingBuffer from "@/views/contentList/buildingBuffer";
import pubsub from "pubsub-js";
import { getCurrentInstance, onMounted } from "vue-demi";
export default {
  name: "rightContainer",
  data: () => {
    return {
      defaultShow: true,
      chartShow: true,
    };
  },
  components: {
    firstRightPage,
    buildingBuffer,
  },
  setup() {
    const { proxy } = getCurrentInstance();
    let subList = [];

    onMounted(() => {
      //首页隐藏
      subList[0] = pubsub.subscribe("firstPageShowChange", (n, data) => {
        proxy.defaultShow = data;
      });
      // 楼栋人口/周边显示控制
      subList[1] = pubsub.subscribe("optionRenew", (n, data) => {
        proxy.chartShow = data === "人口信息";
      });
      // 出租关系缺省
      subList[2] = pubsub.subscribe("RentDataShow", (n, data) => {
        proxy.chartShow = data;
      });
    });
    return {};
  },
  beforeDestroy() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
  beforeRouteLeave() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
};
</script>

<style lang="less" scoped>
.main {
  // background-color: rgba(6, 19, 31, 0.8);
  background-image: linear-gradient(
    to left,
    rgba(6, 19, 31, 1),
    rgba(6, 19, 31, 0.2) 95%,
    rgba(6, 19, 31, 0)
  );
  height: 100%;
  width: 20%;
  position: absolute;
  z-index: 1000;
  // top: 6%;
  right: 0%;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  // box-shadow: 0px 10px 10px 10px rgba(68, 68, 68, 0.5);
  overflow-x: hidden;
  > p {
    width: 50%;
    color: #1296db;
    font-size: 200%;
    font-weight: bolder;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
}
.fade2-enter-active {
  transition: all 0.3s ease-out;
}

.fade2-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.3, 1);
  transform: translateX(30%);
}

.fade2-enter-from,
.fade2-leave-to {
  transition: 0.3s;
  transform: translateX(30%);
  opacity: 0;
}
</style>